
// jsx = javasciprt + xml  是facebook发明的语法
// 浏览器肯定是不能识别这种语法，需要使用babel进行编译

// jsx是用于给组件提供视图模块
// let box = (
//   <div>
//     <h1>Hello React~</h1>
//   </div>
// )

// // React中组件名必须大写   DemoA是组件的名字
// function DemoA() {
//   return box;  // 函数式组件，需要返回一个jsx元素
// }

// export default DemoA;

// --------------------------------------

// import React from "react";

// function DemoA() {
//   return React.createElement(
//     'div',
//     { key: 1 },
//     [
//       React.createElement('h1', { key: 2 }, ['Hello React 666~'])
//     ]
//   );
// }

// export default DemoA;

// --------------------------------------

// import React from "react";

// // let box = (
// //   <div className="box" title="haha">
// //     <span>我是span</span>
// //     <a href="http://ml.com">码路</a>
// //   </div>
// // )

// function DemoA() {
//   return React.createElement(
//     'div',
//     { className: 'box', title: 'haha' },
//     [
//       React.createElement('span', { key: 1 }, '我是span'),
//       React.createElement('a', { href: 'http://ml.com', key: 2 }, '码路'),
//     ]
//   )
// }

// export default DemoA;

// --------------------------------------

// import React from "react";

// // view是一个对象，这个对象叫jsx元素
// // 说到jsx元素，本质就是一个对象，是React.createElement函数调用后的结果
// // 之前说的那一片html+js的代码，也叫jsx元素，但是仅仅是一个语法糖
// let view = React.createElement(
//   'div',
//   { className: 'box', title: 'haha' },
//   [
//     React.createElement('span', { key: 1 }, '我是span'),
//     React.createElement('a', { href: 'http://ml.com', key: 2 }, '码路'),
//   ]
// )
// console.log(view);


// function DemoA() {
//   return view
// }

// export default DemoA;


// --------------------------------------

// import React from "react";

// let element1 = (<div>我是一个div</div>);
// let element2 = React.createElement('div', {}, ["我是一个div"]);
// console.log(element1);
// console.log(element2);

// function DemoA() {
//   return element1
// }

// export default DemoA;

// --------------------------------------

// import React from "react";

// // element1是一个jsx元素，本质是一个对象，这个对象是不可变
// // 说白了，就是不能对 对象中的属性进行操作
// let element1 = (<div>我是一个div</div>);
// // element1.name = "wc";  // 添加属性
// // element1.key = '110'  // 修改属性
// // delelte element1.key; // 删除属性
// console.log(element1);

// function DemoA() {
//   return element1
// }

// export default DemoA;

// jsx元素：由jsx语法糖或React.createElement返回的结果叫jsx元素，本质是一个对象，通常充当组件的视图模板。
// 组件：由class或funciotn定义来的才叫组件，一个组件中通常是有一个jsx视图模块。组件名必须大写。

// --------------------------------------

// import React from "react";

// let a = 110;

// function foo(user) {
//   return `${user.firstName} ${user.lastName}`
// }

// function DemoA() {
//   return (
//     <div>
//       {/* {}放表达式，只要是值都可以放在{}中 */}
//       <h3>{110 + a}</h3>
//       <h3>{`${a}+110`}</h3>
//       <h3>{foo({ firstName: "wang", lastName: " cai" })}</h3>
//     </div>
//   )
// }

// export default DemoA;

// --------------------------------------

// import React from "react";

// // foo百分之百是一个普通函数
// function foo(arg) {
//   if (arg) {
//     return <div>{arg}</div>
//   } else {
//     // 一个普通函数也可以返回jsx
//     return <div>我是默认值</div>
//   }
// }

// let ele = <strong>我是storng</strong>
// function DemoA() {
//   return (
//     <div>
//       <h3>{foo(110)}</h3>
//       <h3>{foo()}</h3>
//       <h3>{foo('hello')}</h3>
//       <h3>{foo(<span>我是一个span</span>)}</h3>
//       <h3>{foo(ele)}</h3>
//     </div>
//   )
// }

// 总结：
//   jsx可以作为函数的入参，说白了，就是把一个jsx传递给一个函数
//   jsx也可以作为函数的返回值，一个函数也可以返回一个jsx
// export default DemoA;

// --------------------------------------

// import React from "react";

// let ele = '<div><a href="http://ml.com">码路</a></div>'

// function DemoA() {
//   return (
//     <div>
//       {ele}
//       <hr />
//       <div dangerouslySetInnerHTML={{ __html: ele }}></div>
//     </div>
//   )
// }

// export default DemoA;

// --------------------------------------

// import React, { Fragment } from "react";


// function DemoA() {
//   return (
//     // <div>
//     //   <div>我是一个div</div>
//     //   <div>我是一个div</div>
//     //   <div>我是一个div</div>
//     // </div>

//     // <React.Fragment>
//     //   <div>我是一个div</div>
//     //   <div>我是一个div</div>
//     //   <div>我是一个div</div>
//     // </React.Fragment>

//     // <Fragment>
//     //   <div>我是一个div</div>
//     //   <div>我是一个div</div>
//     //   <div>我是一个div</div>
//     // </Fragment>

//     <>
//       <div>我是一个div</div>
//       <div>我是一个div</div>
//       <div>我是一个div</div>
//     </>
//   )
// }

// export default DemoA;

// --------------------------------------

// import React, { Fragment } from "react";


// function DemoA() {
//   return (
//     <>
//       {/* 在jsx中写style,style的值必须是一个对象，对象必须放到{} */}
//       <div style={{ border: '9px solid red', height: '100px' }} />
//     </>
//   )
// }

// export default DemoA;

// --------------------------------------

// import React, { Fragment } from "react";

// let a = "box1"
// let b = "box2"
// function DemoA() {
//   return (
//     <div>
//       <div className="box"></div>
//       <div className={a}></div>
//       <div className={`${a} box110 ${b}`}></div>
//       {/* 两个都是静态的，会发生覆盖 */}
//       <div className='box' className='box2'></div>
//       <div className={a} className="box"></div>
//     </div>
//   )
// }

// export default DemoA;

// --------------------------------------

// import React, { Fragment } from "react";

// // demob仅仅是一个函数，只能通过demob()进行函数调用，不能当成组件
// function demob() {
//   return (
//     <div>我是demob组件</div>
//   )
// }

// function DemoA() {
//   return (
//     <div>
//       <demob></demob>
//     </div>
//   )
// }

// export default DemoA;

// --------------------------------------

// import React, { Fragment } from "react";

// const Ml = {
//   Button() {
//     return (<button>点我</button>)
//   },
//   Form() {
//     return (<div>Form组件</div>)
//   }
// }

// function DemoA() {
//   let { Button, Form } = Ml;
//   return (
//     <div>
//       {/* <Ml.Button></Ml.Button>
//       <Ml.Form></Ml.Form> */}

//       <Button></Button>
//       <Form></Form>
//     </div>
//   )
// }

// export default DemoA;

// --------------------------------------

// import React, { Fragment } from "react";

// function Child(props) {
//   // console.log(props);
//   let { name, age, address } = props;
//   return (
//     <div>
//       我是子组件 :  {name}  -- {age}  -- {address}
//     </div>
//   )
// }

// function DemoA() {
//   let data = {
//     name: "wc",
//     age: 18,
//     address: "bj"
//   }
//   return (
//     <div>
//       {/* <Child name={data.name} age={data.age} address={data.address}></Child> */}
//       <Child {...data}></Child>
//     </div>
//   )
// }

// export default DemoA;

// --------------------------------------

// import React, { Fragment } from "react";

// function Child(props) {
//   // console.log(props);
//   let { name, age, address, ...other } = props;
//   console.log(other);
//   return (
//     <div>
//       我是子组件 :  {name}  -- {age}  -- {address}
//     </div>
//   )
// }

// function DemoA() {
//   let data = {
//     name: "wc",
//     age: 18,
//     address: "bj",
//     list: ["a", "b", "c"],
//     info: { a: 1, b: 2 },
//     fn: () => { console.log("fn..."); },
//     header: (<div>我是头部</div>),
//     id: Symbol(1)
//   }
//   return (
//     <div>
//       {/* <Child name={data.name} age={data.age} address={data.address}></Child> */}
//       <Child {...data}></Child>
//     </div>
//   )
// }

// export default DemoA;

// --------------------------------------

// import React, { Fragment } from "react";

// function Child(props) {
//   console.log(props);
//   let { children } = props;
//   return (
//     <div>
//       <h2>我是子组件</h2>
//       <h3>{children()}</h3>
//     </div>
//   )
// }

// function DemoA() {

//   return (
//     <div>
//       {/* <Child>你好</Child>
//       <Child>{true}</Child>
//       <Child><div>Hello React~</div></Child>
//       <Child><div>Hello React~</div><span>hello span</span></Child>
//       <Child><div><div>Hello React~</div><span>hello span</span></div></Child>
//       <Child>{() => { return 110 }}</Child>
//       <Child>{() => { return (<div>220</div>) }}</Child> */}
//       <Child>{() => (<div>220</div>)}</Child>
//     </div>
//   )
// }

// export default DemoA;


// --------------------------------------

import React, { Fragment } from "react";

function DemoA() {
  return (
    <div>
      <div>{["a", "b", "c"]}</div>
      <hr />
      <div>{["a", true, null, undefined, ['bb'], (<div>我是一个div</div>)]}</div>
    </div>
  )
}

export default DemoA;


// --------------------------------------


